{% extends "base.html" %}
{% block title %}用户登录 - 安全认证系统{% endblock %}

{% block content %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

</style>
<div class="auth-container login-bg">
    <div class="layui-container">
        <div class="layui-row">
            <div
                class="layui-col-md-8 layui-col-lg-6 layui-col-xl-5 layui-col-offset-md-2 layui-col-offset-lg-3 layui-col-offset-xl-3.5">
                <div class="auth-card">
                    <div class="auth-header">
                        <h2><i class="fas fa-lock"></i> 用户登录</h2>
                        <p>使用您的账号访问安全系统</p>
                    </div>

                    <form class="layui-form auth-form" id="login-form">
                        <div class="form-group">
                            <div class="input-with-icon">
                                <i class="fas fa-user"></i>
                                <input type="text" name="username" required lay-verify="required"
                                    placeholder="请输入用户名/邮箱" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="input-with-icon">
                                <i class="fas fa-key"></i>
                                <input type="password" name="password" required lay-verify="required"
                                    placeholder="请输入密码" autocomplete="off" class="layui-input" id="password">
                                <i class="fas fa-eye-slash toggle-password" id="toggle-password"></i>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="captcha-container">
                                <div class="captcha-input-container">
                                    <div class="input-with-icon">
                                        <i class="fas fa-shield-alt"></i>
                                        <input type="text" name="captcha" required lay-verify="required"
                                            placeholder="请输入验证码" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="captcha-img-container">
                                    <img src="/captcha?" id="captcha-img" class="captcha-img" alt="验证码" title="点击刷新验证码">
                                    <div class="captcha-refresh">点击图片刷新验证码</div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group remember-group">
                            <a href="/forgot-password" class="forgot-password">忘记密码?</a>
                        </div>

                        <div class="form-group">
                            <button class="layui-btn layui-btn-fluid auth-btn" lay-submit lay-filter="login">
                                <i class="fas fa-sign-in-alt"></i> 登录系统
                            </button>
                        </div>

                        <div class="auth-footer">
                            还没有账号? <a href="/register" class="register-link">立即注册</a>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    layui.use(['form', 'jquery', 'layer'], function () {
        var form = layui.form;
        var $ = layui.$;
        var layer = layui.layer;

        // 刷新验证码
        $('#captcha-img').click(function () {
            const randStr = new Date().getTime().toString();
            $(this).attr('src', '/captcha?' + Math.random());
        });

        $('#toggle-password').click(function () {
            const passwordInput = $('#password');
            const icon = $('#toggle-password');

            if (passwordInput.attr('type') === 'password') {
                passwordInput.attr('type', 'text');
                icon.removeClass('fa-eye-slash').addClass('fa-eye');
            } else {
                passwordInput.attr('type', 'password');
                icon.removeClass('fa-eye').addClass('fa-eye-slash');
            }
        });

        // 表单提交
        form.on('submit(login)', function (data) {
            var loadIndex = layer.load(1, { shade: [0.5, '#1E9FFF'] });

            // 准备发送的数据
            var postData = {
                'csrf_token': $('meta[name="csrf-token"]').attr('content'),
                username: data.field.username,
                password: data.field.password,
                captcha: data.field.captcha,
            };

            $.ajax({
                url: '/auth/login',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(postData),
                success: function (res) {
                    layer.close(loadIndex);
                    if (res.token) {
                        layer.msg('登录成功，正在跳转...', { icon: 1, time: 1500 });
                        // localStorage.setItem('auth_token', res.token);
                        setTimeout(function () {
                            window.location.href = res.redirect_url || '/dashboard';
                        }, 1500);
                    } else {
                        // 刷新验证码
                        $('#captcha-img').attr('src', '/captcha?' + Math.random());
                        layer.msg(res.error || '登录失败', { icon: 2 });
                    }
                },
                error: function (xhr) {
                    layer.close(loadIndex);
                    var res = xhr.responseJSON;
                    if (res && res.errors) {
                        // 显示表单错误
                        var errorMsg = '';
                        for (var field in res.errors) {
                            errorMsg += res.errors[field].join(', ') + '\n';
                        }
                        layer.msg(errorMsg, { icon: 2 });
                    } else {
                        layer.msg(res?.error || '服务器错误', { icon: 2 });
                    }
                    // 刷新验证码
                    $('#captcha-img').attr('src', '/captcha?' + Math.random());
                }
            });
            return false;
        });
    });
</script>
{% endblock %}